<template>
	<!-- 我的拼团 -->
	<div class="groupBookingRecord">
		<div>
			<van-nav-bar
			  title="我的拼团"
			  left-text="返回"
			  right-text=""
			  left-arrow
			  @click-left="retreat"
			  @click-right="onClickRight"
			/>
		</div>
		<div>
			<van-tabs v-model="active">
			  <van-tab title="全部">
				<div>
					<ul class="goods_list">
						<li>
							<div class="gb_detail">
								<div class="good_img">
									<img src="https://image.soole.com.cn/1571724551310.jpg">
								</div>
								<div  class="item">
									<div class="good_title">
										<div class="good_title_top">
											<div class="s_text">2人团</div>
											<p class="title van-ellipsis">茅台酱香白酒名撒撒都是酒酒名撒撒都是酒</p>
										</div>
										<p class="count">香槟色，48*75cm一对装</p>
									</div>
									<div class="pce_sum">
										<p class="price"><span>￥318</span></p>
										<p class="gb_style"><span>等待拼团</span></p>
									</div>
								</div>
							</div>
							<div class="operation_but">
								<div class="but1">
								<van-button plain round color="#FF1B28">拼团详情</van-button>
								</div>
								<div class="but1">
									<van-button plain round type="default">查看订单</van-button>
								</div>
							</div>
						</li>
										
						<li>
							<div class="gb_detail">
								<div class="good_img">
									<img src="https://image.soole.com.cn/1571724551310.jpg">
								</div>
								<div  class="item">
									<div class="good_title">
										<div class="good_title_top">
											<div class="s_text">2人团</div>
											<p class="title van-ellipsis">茅台酱香白酒名撒撒都是酒酒名撒撒都是酒</p>
										</div>
										<p class="count">香槟色，48*75cm一对装</p>
									</div>
									<div class="pce_sum">
										<p class="price"><span>￥318</span></p>
										<p class="gb_style"><span>拼团成功</span></p>
									</div>
								</div>
							</div>
							<div class="operation_but">
								<div class="but1">
								<van-button plain round color="#FF1B28">拼团详情</van-button>
								</div>
								<div class="but1">
									<van-button plain round type="default">查看订单</van-button>
								</div>
							</div>
						</li>
					</ul>
				</div>
			  </van-tab>
			  <van-tab title="拼团中">
				  <div>
				  	<ul class="goods_list">
				  		<li>
							<div class="gb_detail">
								<div class="good_img">
									<img :src="commodityData.ingUrl">
								</div>
								<div  class="item">
									<div class="good_title">
										<div class="good_title_top">
											<div class="s_text">2人团</div>
											<p class="title van-ellipsis">{{commodityData.name}}</p>
										</div>
										<p class="count">{{commodityData.specification}}</p>
									</div>
									<div class="pce_sum">
										<p class="price"><span>￥{{commodityData.price}}</span></p>
										<p class="gb_style"><span>等待拼团</span></p>
									</div>
								</div>
							</div>
				  			<div class="operation_but">
								<div class="but1">
								<van-button plain round color="#FF1B28" @click='groupBookingDetail'>拼团详情</van-button>
								</div>
								<div class="but1">
									<van-button plain round type="default">查看订单</van-button>
								</div>
							</div>
				  		</li>
				  	</ul>
				  </div>
				  
				</van-tab>
				<van-tab title="拼团成功">
					拼团成功
				</van-tab>
			</van-tabs>
		</div>
		
		
		
	</div>
</template>

<script>
	export default {
	data() {
		return {
		  active: 1,
		  commodityData:{//拼团详细
			ingUrl:'https://image.soole.com.cn/1571724551310.jpg',
			name:'茅台酱香白酒名撒撒都是酒酒名撒撒都是酒',
			specification:'香槟色，48*75cm一对装',
			price:'316',
		  }
		};
	  },
	  methods: {
	    retreat() {
	      if (window.history.length <= 1) {
	      	this.$router.push({path:'/'})
	      } else {
	      	this.$router.go(-1);
	      }
	    },
	    onClickRight() {
	      this.$toast('按钮');
	    },
		//拼团详细
		groupBookingDetail(){
			var commodityData = this.commodityData;
			var query={
				id:1974944,
				// name:commodityData.name,
				// img_url:commodityData.ingUrl,
				// // maxtime:commodityData.maxtime,//时间戳
			}
			this.$router.push({path:'/groupBookingDetail',query:query});
		},
	  }
	}
</script>

<style lang="scss" scoped>
	.van-tab--active{
		color: #FF1B28;
	}
	.groupBookingRecord{
		.goods_list {
			overflow: hidden;
			li{
				margin-top: 10px;
			}
			.gb_detail{
				display: flex;
				width: 100%;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 10px;
				margin-right: 6px;
				margin-bottom: 1px;
				.item{
					width: 70%;
				}
				.good_title{
					
				.good_title_top{
					display: flex;
					align-items: baseline;
					margin-bottom: 10px;
				}
				.s_text {
					font-size: 12px;
					background-color: #FF1B28;
					color: white;
					min-width: 43px;
					line-height: 16px;
					padding: 1px 6px;
					border-radius: 4px;
					margin-top: 5px;
					margin-right: 7px;
				}
				.title {
					color: #141414;
					font-size: 14px;
					margin-top: 9px;
				}
				.count{
					font-size: 12px;
					color: #666666;
					margin-bottom: 8px;
				}
			}
			.pce_sum {
				display: flex;
				justify-content: space-between;
				.price {
					font-size: 15px;
					font-weight: 600;
					color: #F82E2E;
					margin-right: 10px;
				}
				.gb_style{
					font-size: 12px;
					color:#FF1B28;
				}
			}	
		}
		.operation_but{
			display: flex;
			background-color: #fff;
			justify-content: flex-end;
			padding:10px 0;
			.but1{
				margin-right: 10px;
			}
			.van-button{
				height: 30px;
				line-height: 30px;
			}
			.van-button--round{
				border-radius: 5px;
			}
		}
					
		.good_img {
			
			width: 30%;
			margin-right: 10px;
		}
				
		img {
			width: 80px;
			height: 80px;
			// width: 100%;
			// height: 100%;
		}
	}
	.van-nav-bar{
		background: #fff;
		border-bottom: 1px solid #ebedf0;
		.van-nav-bar__title{
			color:#333333;
		}
		.van-icon{
			color:#333333;
		}
	}
}
</style>
